<template>
  <div class="mb-4 d-flex flex-column gap-col-8">
    <div class="font-size-14 font-weight-400">
      {{ $t('info.passwordValidate.info') }}
    </div>
    <div class="font-size-14 font-weight-500 align-center gap-row-6 d-flex">
      <Icon :name="firstSchema ? 'yesActive' : 'yes'"></Icon>
      <span>{{ $t('info.passwordValidate.min') }}</span>
    </div>
  </div>
</template>
<script setup>
import { computed, watch } from 'vue'
import { useYup } from '@/plugins/yup'

const { string } = useYup()
const props = defineProps({
  password: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['update:validate'])

const firstSchema = computed(() => string().required().min(8).isValidSync(props.password))

watch(
  () => props.password,
  () => emit('update:validate', firstSchema.value),
)
</script>
